<template>
    <div class="join-in">
        <form action="" @submit.prevent="uploadShop">
        <!-- <div class="uplod">
                <span class="join-in-uplod">
                    <img src="../../assets/uplod.png" alt="">
                    <input type="file" name="" id="">
                </span>
                <p>设置你的店铺头像</p>
            </div> -->
            <div class="join-in-form">
                <label for="">联系人姓名</label>
                <input type="text" placeholder="联系姓名"  v-model="upload.name">
            </div>
            <div class="join-in-form">
                <label for="">联系电话</label>
                <input type="text" placeholder="联系电话" v-model="upload.number">
            </div>
            <div class="join-in-form">
                <label for="">身份证号</label>
                <input type="text" placeholder="身份证号" v-model="upload.sfz_id">
            </div>
            <div class="join-in-form">
                <label for="">店铺名称</label>
                <input type="text" placeholder="店铺名称" v-model="upload.merchant_name">
            </div>
            <div class="join-in-form">
                <label for="">登陆账号</label>
                <input type="text" placeholder="登陆账号"  v-model="upload.user_name">
            </div>
            <div class="join-in-form">
                <label for="">登陆密码</label>
                <input type="text" placeholder="登陆密码"  v-model="upload.password">
            </div>
            <div class="join-in-form">
                <p class="join-in-form-p">身份证</p>
                <div class="form-uplod">
                    <div class="join-in-uplod">
                        <img :src="imgUrl" alt="">
                        <i></i>
                        <input type="file" @change="uploads">
                        <input type="hidden" v-model="upload.imgInput" >
                    </div>
                    <p>身份证正面</p>
                </div>
                <div class="form-uplod">
                    <div class="join-in-uplod"> 
                        <img :src="imgUrl2" alt="">
                        <i></i>
                        <input type="file" @change="uploads2">
                        <input type="hidden" :v-model="upload.imgInput2">
                    </div>
                    <p>身份证反面</p>
                </div>
            </div>
            <button class="join-in-btn" type="submit">确定</button> 
            <p class="yue">
                <img src="../../assets/yue.png" v-show="is == 1" @click="look"/> 
                <img src="../../assets/yue1.png" v-show="is == 0" @click="look"/> 
                <!-- <img :src="this.is== true ? require('../../assets/yue.png') : require('../../assets/yue1.png')" /> -->
                查看<a>《用户协议》</a>和<a>《惠万众商户规则》</a>
            </p>
        </form>
        <!-- 规则介绍 -->
        <div class="black" v-show="isShow2"></div>
        <div class="rule2" v-show="isShow">
            <p>···</p>
            <p>申请成功，等候客服审核中...</p>
            <p>客服将会在1-3个工作日，以“短信”方式发送您审核结果</p>
            <router-link :to="'/User'" class="link">确认</router-link>
            <!-- <router-link :to="'/JoinIn/' + merchant_id" class="link">确定</router-link> -->
            <div>客服电话<em>18526793565</em></div>
            <i @click="times">&times;</i>
        </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
export default {
  data(){
    return {
        isShow2:false,
        isShow:false,
        imgUrl:'',
        is:0,
        imgUrl2:'',
        upload:{
            imgInput:'',
            imgInput2:'',
            name:'',          //姓名
            number:'',        //电话
            sfz_id:'',        //身份证号
            user_name:'',
            password:'',
            merchant_name:'', //店铺id
        }
    }
  },
  methods:{
    look:function(){
        if( this.is == 1){
            this.is = 0
        }else{
            this.is = 1
        }
    },
    uploads(e){
        const file = e.target.files[0];//获取到当前文件对象

        let URL = window.URL||window.webkitURL; // 与上传没有关系（可选）
        this.imgUrl = URL.createObjectURL(file); // 这是为了显示图片而已， 与上传没有关系（可选）
        
        // 传递一个 FormData 对象 即可 
        let formData = new FormData();
        formData.append('file',file); // 'file' 可变 相当于 input 表单的name 属性
        //console.log(formData.append('file',file))
        this.$http.post('/ImgFile',formData).then(rs=>{
            console.log(rs.data)
            this.upload.imgInput = rs.data
        }).catch(err=>{
            console.log(err)
        })
    },
    uploads2(e){
        const file = e.target.files[0];//获取到当前文件对象

        let URL = window.URL||window.webkitURL; // 与上传没有关系（可选）
        this.imgUrl2 = URL.createObjectURL(file); // 这是为了显示图片而已， 与上传没有关系（可选）
        
        // 传递一个 FormData 对象 即可 
        let formData = new FormData();
        formData.append('file',file); // 'file' 可变 相当于 input 表单的name 属性
        //console.log(formData.append('file',file))
        this.$http.post('/ImgFile',formData).then(rs=>{
            console.log(rs.data)
            this.upload.imgInput2 = rs.data
        }).catch(err=>{
            console.log(err)
        })
    },

    uploadShop:function(){
        var uo = url.parse(window.location.href, true)
			console.log(uo.query.merchant_id)
        var openid = localStorage.getItem("openid")
        if( this.upload.sfz_id.length == 18){
            if(this.is == 0){
                var upload = {
                    sfz_front:this.upload.imgInput,
                    sfz_contrary:this.upload.imgInput2,
                    name:this.upload.name,         
                    number:this.upload.number,       
                    sfz_id:this.upload.sfz_id,   
                    openid:openid,
                    user_name:this.upload.user_name,
                    password:this.upload.password,
                    merchant_id:uo.query.merchant_id,
                    merchant_name:this.upload.merchant_name,
                }
                this.$http.post('/index/merchant/entering',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    //this.imgInput2 = rs.data
                    if(rs.data.status == 'error'){
                        console.log(rs.data)
                        alert(rs.data.info)
                    }else{
                        // alert(rs.data.info +'请等待客服已短信形式通知')
                        // this.$router.push({name:'User'});
                        this.isShow = true;
                        this.isShow2 = true;
                    }
                    
                }).catch(err=>{
                    console.log(err)
                })
            }else{
                alert('您还没有查看协议哦~')
            }
        }else{
            alert('身份证要18位')
        }
        
    },
    times:function(){
        this.isShow = false;
        this.isShow2 = false;
    },
  },
    mounted(){
		//this.openid();
	},
}

</script>
<style scoped>
.img{
    width:100px;
    height:100px;
}
.yue img{
    width: 14px;
    margin-left: 3%;
    vertical-align: sub;
}
.yue a{
    color:#259B24;
}
.black{
    background:rgba(0, 0, 0, 0.3);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 19;
}
.link{
    width: 100px;
    text-align: center;
    height: 34px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    border: 0;
    display: inline-block;
    line-height: 38px;
    margin-bottom: 15px;
}
.rule2{
    position: fixed;
    width: 80%;
    top: 25%;
    left: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    z-index: 20;
    text-align: center;
}
.rule2 p:nth-child(1){
    color:#259B24;
    font-size:20px;
    font-weight: 600;
    border-radius: 10px;
    background: #FFF;
    width:45px;
    height:45px;
    line-height: 45px;
    box-shadow: 0px 4px 18px #259B24;
    margin:0 auto;
    margin-top:20px;
}
.rule2 p:nth-child(2){
    color:#259B24;
    font-size:16px;
    font-weight: 600;
    margin-top:20px;
}
.rule2 p:nth-child(3){
    width:94%;
    display: inline-block;
    margin-left: 3%;
    margin-right: 3%;
    margin-top:15px;
    margin-bottom: 15px;
}
.rule2 div{
    background: rgba(0, 0, 0, 0.12);
    padding:15px 0;
}
.rule2 div em{
    display: inline-block;
    width:100%;
    text-decoration: underline;
    color: #F00;
    margin-top:6px;
}
.rule2 i{
    color:#FFF;
    background: #BBB;
    width:20px;
    height:20px;
    border-radius: 50%;
    text-align: center;
    font-size:16px;
    position: absolute;
    top:10px;
    right: 10px;
    line-height: 20px;
}
.join-in-uplod img{
    width: 74px;
    height: 74px;
    border-radius: 5px;
    z-index: 19;
    position: absolute;
    top: 0;
    left: 0;
}
.join-in-uplod i{
    background: url(../../assets/uplod.png);
    width: 30px;
    height: 30px;
    background-size: 100%;
    display: inline-block;
    margin-top: 20px;
    z-index: 10;
}
body{
  background: #F9F9F9;
}
.join-in{
    margin-top:20px;
}
.join-in-form{
    background: #FFF;
    border-radius: 5px;
    width:94%;
    margin-left: 3%;
    display: inline-block;
    margin-top:10px;
    overflow: hidden;
}
.join-in-form label{
    float:left;
    padding:12px 10px;
}
.join-in-form input[type='text']{
    float: right;
    padding:14px 12px;
    width: 65%;
    text-align: right;
    border: 0;
    outline: none;
}
.join-in-form-p{
    padding:10px;
    width:88%;
    margin-left:3%;
    border-bottom: 1px solid #CCC;
}
.join-in-form textarea{
    width: 100%;
    padding: 3%;
    height: 80px;
    border: 0;
    outline: none;
}
.uplod{
    width:100%;
    display: inline-block;
    text-align: center;
    margin-top:20px;
}
.join-in-uplod{
    width: 74px;
    height: 74px;
    border-radius: 5px;
    background: #F9f9f9;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    position: relative;
}
.uplod span{
    background: #FFF;
}
.join-in-uplod input[type='file'],.form-uplod input[type='file']{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 0;
    z-index: 20
}
.form-uplod{
    width:50%;
    float:left;
    text-align: center;
    margin:15px 0;
    position: relative;
}
.form-uplod p{
    margin-top:5px;
}
.join-in-btn{
    background: #FE2746;
    color:#FFF;
    width:94%;
    margin-left:3%;
    text-align: center;
    border:0;
    border-radius: 5px;
    margin-top:20px;
    padding:12px ;
    margin-bottom: 15px;
}
</style> 
